<script setup lang="ts">

import cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader';

import {ref} from "vue";
import {
  prefetchMetadataInformation,
} from '@/helpers/convertMultiframeImageIds';
import SingleStackViewer from "../../../../components/SingleStackViewer.vue";

const selectRef = ref(null)
const imageIdsRef = ref([])

async function handleFileSelect(evt) {
  const files = evt.target.files;
  let temp = []
  for (const file of files) {
    const imageId = cornerstoneDICOMImageLoader!.wadouri.fileManager.add(file);
    temp.push(imageId)
  }
  await loadAndViewImage(temp);
  imageIdsRef.value = temp
}

async function loadAndViewImage(imageIds) {
  await prefetchMetadataInformation(imageIds);
}

const ids = {
  toolsGroupId: 'stack-viewer-local',
  viewportId: 'stack-viewer-local-CT_STACK',
  renderingEngineId: 'stack-viewer-local-renderEngine'
}

</script>

<template>
  <input type="file" ref="selectRef" multiple accept=".dcm" @change="handleFileSelect">
  <single-stack-viewer :imageIds="imageIdsRef" :ids="ids"/>
</template>

<style scoped>

</style>
